import React from 'react';
import styles from './Users.css';
import { Table, Pagination, Card } from 'antd';
import {USERS_PAGE_SIZE} from '../../constants'
import {format} from '../../utils/timeUtil'


class Users extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      currentPage: 1,
    };
  }

  componentWillMount() {

  }


  render() {
    return (
      <div className={styles.normal}>
        <Table
          columns={columns}
          dataSource={this.props.weixin.userInfoList.user_info_list.map(item => { return {...item, key: item.openid}})}
          pagination={{ total: this.props.weixin.openidList.total, current: this.state.currentPage, pageSize: USERS_PAGE_SIZE }}
          onChange={this.handleTableChange.bind(this)}
          scroll={{ y: 700 }}
          loading={this.props.weixin.loading}
          bordered
        />
      </div>
    )
  }

  componentDidMount() {

  }

  handleTableChange(pagination, filters, sorter) {
    console.log(this.props)
    console.log(pagination)
    // const total = this.props.openidList.total;
    this.setState({currentPage: pagination.current})
    const openidList = this.props.weixin.openidList.data.openid.slice(USERS_PAGE_SIZE * (pagination.current - 1), USERS_PAGE_SIZE * pagination.current);
    console.log(openidList)
    console.log(openidList.length)
    if (this.props.weixin.getOpenidListCompleted) {
      this.props.dispatch({type: 'weixin/getUserInfoList', openidList: openidList})
    } else {
      alert('数据加载中，请稍后再试')
    }
  }
}

const columns = [
  {
    title: '',
    width: 45,
    key: 'id',
    render(text, record, index) {
      return index + 1;
    }
  },
  {
    title: '头像',
    width: 50,
    key: 'headimgurl',
    dataIndex: 'headimgurl',
    render(text) {
      return <img src={text} style={{ width: 30, height: 30 }}/>
    }
  },
  {
    title: '昵称',
    key: 'nickname',
    dataIndex: 'nickname',
  },
  {
    title: '关注时间',
    width: 200,
    key: 'subscriveTime',
    dataIndex: 'subscribeTime',
    render(text) {
      const subscribeTime = new Date(text * 1000);
      return <span className={styles.smallSize}>{format(subscribeTime)}</span>;
    }
  },
  {
    title: '操作',
    width: 100,
    key: 'operation',
    render(text) {
    }
  },
]



export default Users;
